<script setup>
import {ref, getCurrentInstance} from 'vue'
// import LunarCalendar from 'lunar-calendar'
import {weeks, monthDays} from '@/common/my.date'

const {proxy} = getCurrentInstance()
let array = ref([])
const now = new Date()
const year = now.getFullYear(), month = now.getMonth()
const form = ref({'dateVal': now})
let day = ref(0)
const titleYear = ref(year)
const titleMonth = ref(month)
nowMonth()

function search() {
  console.log(now.getFullYear(), now.getMonth())
  let val = form.value.dateVal
  array.value = monthDays(val.getFullYear(), val.getMonth())
  if (val.getFullYear() === year && val.getMonth() === month) {
    day.value = now.getDate()
  } else {
    day.value = -1
  }
  titleYear.value = val.getFullYear()
  titleMonth.value = val.getMonth() + 1
}

function nowMonth() {
  const now = new Date()
  array.value = monthDays(now.getFullYear(), now.getMonth())
  day.value = now.getDate()
  form.value.dateVal = now
  search()
}

function nextMonth(num) {
  let val = form.value.dateVal
  val = val.setMonth(val.getMonth() + num)
  val = new Date(val)
  form.value.dateVal = val
  search()
}

</script>
<template>
  <div class="container">
    <div class="top">
      <div class="month-title">
        {{ titleYear }}年{{ titleMonth }}月
      </div>
      <div class="month-form">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="选择月份">
            <el-date-picker
                v-model="form.dateVal"
                type="month"
                placeholder="选择月" @change="search">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nowMonth">当前时间</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nextMonth(-1)">上个月</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nextMonth(1)">下个月</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div class="border">
      <div class="row">
        <div class="border col week" v-for="col in weeks">
          {{ col }}
        </div>
      </div>
      <div class="row" v-for="item in array">
        <div class="border col date" v-for="col in item" :class="{'now':day===col.day && col.type === 'now','work':col.work === 1}">
          <div>
            <span :class="{'other-month':col.type !== 'now','holiday':col.holiday === 1}">{{ col.day }}</span>
            <span v-if="col.holiday === 1" :class="{'holiday':col.holiday === 1,'other-month':col.type !== 'now' }">({{col.holidayName || '休' }})</span>
            <span v-if="col.work === 1" :class="{'work':col.work === 1,'other-month':col.type !== 'now'}">(班)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.top {
  margin: 1rem;
  display: flex;
  flex-direction: row;
}

.month-form {
  flex: 8;
}

.month-title {
  flex: 3;
  font-size: 3rem;
  font-weight: 700;
}

.container {
  text-align: center;
}

.border {
  border: black solid 1px;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  margin: 0.1rem;
  flex: 1;
  padding: 1rem;
}

.col:hover {
  background-color: #409eff;
  cursor: pointer;
}

.date {
  padding: 1rem 0;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
}

.week {
  background: repeating-linear-gradient(to left, #ffd800, #0f0, #FFF3ff);
  font-weight: 700;
  font-size: 1.5rem;
}

.other-month {
  color: #ccc !important;
}

.now {
  background-color: #b3e19d;
}
.holiday{
  color: forestgreen;
}
.work{
  color: #ff4d51;
}


</style>